<template>
<div class="content_box">
  <div class="auth_btn">
    <div class="top">
      <img src="https://tpp-admin.oss-cn-beijing.aliyuncs.com/rich/20240102/DvqeyzFAek2RT0mNP7gL.png" alt="">
      <p class="title">应许之地共享自助棋牌馆</p>
      <p class="text">小程序需要获取您的授权才能正常使用</p>
    </div>
    <div class="anniu">
      <button v-if="checked" class="get_phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNum">
        手机号快捷登录
      </button>
      <button v-else class="get_phone" @click="noneAgree">
        手机号快捷登录
      </button>
    </div>
    <div class="tips_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="tips">
        <van-checkbox 
        size="152px"
        checked-color="#00C200" 
        icon-size="16px" 
        :value="checked " 
        @change="changeCheckbox"><span class="span1">已阅读并同意</span></van-checkbox>
        <p><span class="span2" @click="goLink">《应许之地平台用户服务协议》</span></p>
        </div>
      
    </div>
  </div>
</div>
</template>

<script>
import { 
  setUserPhone,
} from "@/utils/auth";
import { getUserPhone,setUserProfile } from "@/api/index";
export default {
  data() {
    return {
      checked:false,
      userPerf:null,
      isIphoneXnum:0,
    };
  },
  methods: {
    goLink(){
      wx.navigateTo({
          url: '/pages/xieyi/main',
        });
    },
  //  onChange(e){
  //    console.log(e)
  //    this.checked = e.mp.detail
  //    wx.getUserProfile({
  //     lang:'zh_CN',
  //     desc:'展示用户信息',
  //     success:(res)=>{
  //       setusrInfo(res.userInfo)
  //     },
  //     fail:(err)=>{
  //       this.checked = false
  //     }
  //   })
  //  },

  //  // 获取手机号
  //   getPhoneNumber(e){
  //     console.log(e)
  //     let data = {
  //       encryptedData:e.target.encryptedData,
  //       iv:e.target.iv,
  //     }
  //     getUserPhone(data).then(res=>{
  //       if(res.statusCode == '00000'){
  //         wx.navigateBack({
  //           delta: 1
  //         })
  //       }
  //     })
  //   },
    noneAgree(){
        wx.showToast({
          title: '请勾选同意应许之地平台用户服务协议',
          icon: 'none',
          duration: 2000
        })
    },
     // 获取电话号码
    getPhoneNum (e) {
      if (!this.checked) {
        wx.showToast({
          title: '您还未同意应许之地平台用户服务协议~',
          icon: 'none',
          duration: 2000
        })
        return 
        
      }
      
      if (!e.target.encryptedData) {
        wx.showToast({
          title: '已取消',
          icon: 'none',
          duration: 1000
        })
        return 
      }
      if (e.target.errMsg !== 'getPhoneNumber:ok') {
        return false
      }
      var that = this
      //检查登录态是否过期
      wx.checkSession({
        success (res) {
          // 获取手机号
          that.$showLoading('登录中...')
          getUserPhone({
              encryptedData: e.target.encryptedData,
              iv: e.target.iv
            })
            .then(res => {
              if(res.statusCode == '00000'){
                wx.hideLoading()
                setUserPhone(res.data)
                wx.navigateBack({
                  delta: 1  // 返回上一级页面。
                })
                that.$toast('登录成功')
              }else{
                wx.hideLoading()
                that.$toast('登录失败，请重试')
                return
                 wx.showToast({
                  title: '当前网络不稳定,请尝试重新登录~',
                  icon: 'none',
                  duration: 2000
                })
              }
            }).catch(error => {
              wx.showToast({
                title: '网络开小差了~',
                icon: 'none',
                duration: 1000
              })
            })
          // })
        },
        fail (err) {
           wx.showToast({
                title: '当前网络不稳定，请稍后~',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                 wx.navigateBack({
                        delta: 1  // 返回上一级页面。
                    })
              }, 1500);   
        }
      })
      // debugger
    },
    changeCheckbox(e){
      console.log(e)
      const that=this
      if(this.checked){
        this.checked=!this.checked
        return
      } 
      this.checked=true
    },
  },
  onShow(){
    this.checked=false
  },
  onLoad(options) {
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 10;
        }
      },
    });
  },
};
</script>

<style lang="scss" scoped>
/* 去除button默认样式 */

  button::after {
   border: none;
  }

  button {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    line-height:inherit;
  }
  button {
  border-radius:0;
}
.content_box {
  .auth_btn{
    width: 100%;
    height: 80rpx;
    margin: 30px auto;
    .anniu{
      margin:166rpx 80rpx 0 80rpx;
    }
    .tips_box{
      width: 92%;
      position: fixed;
      bottom:30rpx;
      margin:0 30rpx;
    }
    .tips{
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-bottom: 10rpx;
      margin-left: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      p{
        margin-left: 5px;
      }
      .span1{
        color: #999;
      }
      .span2{
        color: #00C200;
        font-weight: 500;
      }
    
    }
    .get_phone{
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      margin: 0 auto;
      background: #00C200;
      border-radius: 50rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top:30rpx;
      img{
        width: 48rpx;
        height: 48rpx;
        margin-right:10rpx;
      }
    }
  }
  .top{
    text-align: center;
    img{
      width: 202rpx;
      height: 202rpx;
      border-radius: 50%;
      margin-bottom:50rpx;
    }
    .title{
      font-size: 40rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
    .text{
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
      margin-top:8rpx;
    }
  }
}

</style>